<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">

<link rel="stylesheet" href="case.css">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<div class="container">
		<div class="layui-row layui-col-space10">
			<div class="layui-fluid">
				<div class="div_h3title">
					<i class="dtreefont dtree-icon-fenguangbaobiao"></i>
					<span>dtree 数据树文档 - layui.dtree</span>
				</div>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">以下介绍了一些数据格式的用法，每种数据格式都有其对应的参数，如果你想使用除默认格式外的其他格式，请仔细阅读该篇。</blockquote>
				<blockquote class="layui-elem-quote">模块加载名称：dtree</blockquote>
				<blockquote class="layui-elem-quote">
					<ul class="layui-timeline">
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
								<div class="layui-timeline-content layui-text">
									<h3 class="layui-timeline-title version-title"></h3>
									<ul data-vlog="vs250">
										<li>【新增】基础属性新增：formatter属性，用于对树展示节点的文字信息格式化处理。</li>
										<li>【更新】内置方法更新：parseData新增一个回传参数：fmtTitle，用于获取formatter标记过的内容，原来的title函数只获取原始title信息</li>
									</ul>
								</div>
							</li>
						</ul>
				</blockquote>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="defaultJ">
					<legend>标准数据格式</legend>
					<div class="layui-field-box">
						<p>以下介绍了树展示所需的标准JSON格式。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg4"><div style="height: 200px;overflow: auto;"><ul id="dataTree" class="dtree" data-id="0"></ul></div></div>
							<div class="layui-col-lg8">
								<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
									dtree.render({
									  elem: "#dataTree1",
									  url: "../json/case/dataTree.json"
									});
								</pre>
							</div>
							<div class="layui-col-lg12">
								<p>此json的数据格式为：</p>
								<pre class="layui-code" lay-title="数据格式" lay-encode="true">
									{
									"status":{"code":200,"message":"操作成功"},
									"data": [
									  {"id":"001","title": "湖南省","parentId": "0","children":[]},
									  {"id":"002","title": "湖北省","parentId": "0","children":[]},
									  {"id":"003","title": "广东省","parentId": "0","children":[]},
									  {"id":"004","title": "浙江省","parentId": "0","children":[]},
									  {"id":"005","title": "福建省","parentId": "0","children":[]}
									]
									}
								</pre>
								<p>标准数据格式中，code和message是包括在status中的，code的默认值是200。data中的数据是有子集关系的，即下级数据存储在children中。</p>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="layui">
					<legend>layui风格数据格式（dataStyle）</legend>
					<div class="layui-field-box">
						<p>考虑到一部分用户在使用组件的时候，已经使用了一套layui的数据格式，并且所有的数据返回都遵循这一套数据格式的情况，因此，组件开放适用于layui的数据格式模式。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg4"><div style="height: 200px;overflow: auto;"><ul id="dataTree1" class="dtree" data-id="0"></ul></div></div>
							<div class="layui-col-lg8">
								<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
									dtree.render({
									  elem: "#dataTree1",
									  url: "../json/case/dataTree1.json",
									  dataStyle: "layuiStyle",  //使用layui风格的数据格式
									  response:{message:"msg",statusCode:0}  //修改response中返回数据的定义
									});
								</pre>
							</div>
							<div class="layui-col-lg12">
								<p>此json的数据格式为：</p>
								<pre class="layui-code" lay-title="数据格式" lay-encode="true">
									{
									"code":0,
									"msg":"操作成功",
									"data": [
									  {"id":"001","title": "湖南省","parentId": "0","children":[]},
									  {"id":"002","title": "湖北省","parentId": "0","children":[]},
									  {"id":"003","title": "广东省","parentId": "0","children":[]},
									  {"id":"004","title": "浙江省","parentId": "0","children":[]},
									  {"id":"005","title": "福建省","parentId": "0","children":[]}
									]
									}
								</pre>
								<p>layui风格数据格式中，code和msg是独立的，code的默认值是0。data中的数据是有子集关系的，即下级数据存储在children中。</p>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="list">
					<legend>list集合数据格式（dataFormat）</legend>
					<div class="layui-field-box">
						<p>考虑到一部分用户在使用组件之前，已经使用了其他树组件，而其他组件提供的数据格式并没有这么复杂，因此，组件开放适用于list集合形式的数据格式模式。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg4"><div style="height: 400px;overflow: auto;"><ul id="dataTree2" class="dtree" data-id="0"></ul></div></div>
							<div class="layui-col-lg8">
								<pre class="layui-code" lay-title="html" lay-encode="true">
									<div style="height: 400px;overflow: auto;">
									  <ul id="dataTree2" class="dtree" data-id="0"></ul>
									</div>
								</pre>
								<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
									dtree.render({
									  elem: "#dataTree2",
									  url: "../json/case/dataTree2.json",
									  dataFormat: "list",  //配置data的风格为list
									  checkbar:true //开启复选框
									});
								</pre>
							</div>
							<div class="layui-col-lg12">
								<p>此json的数据格式为：</p>
								<pre class="layui-code" lay-title="数据格式" lay-encode="true">
									{
									"status":{"code":200,"message":"操作成功"},
									"data": [
									  {"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},
									  {"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},
									  {"id":"003","title": "广东省","checkArr": "0","parentId": "0"},
									  {"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},
									  {"id":"005","title": "福建省","checkArr": "0","parentId": "0"},
									  {"id":"001001","title": "长沙市","checkArr": "0","parentId": "001"},
									  {"id":"001002","title": "株洲市","checkArr": "0","parentId": "001"},
									  {"id":"001003","title": "湘潭市","checkArr": "0","parentId": "001"},
									  {"id":"001004","title": "衡阳市","checkArr": "0","parentId": "001"},
									  {"id":"001005","title": "郴州市","checkArr": "0","iconClass": "dtree-icon-caidan_xunzhang","parentId": "001"}
									]
									}
								</pre>
								<p>list集合数据格式中，code和message是包括在status中的，code的默认值是200。data中的数据是无子集关系的，只需提供一个具有上下级关系映射的list形式的数据即可。</p>
								<p>list集合数据格式中，顶级节点的parentId是ul标签上的data-id中的值。</p>
								<p>例如该数据中顶级标签是湖南省，它的parentId为0，则ul标签的data-id="0"。</p>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="layuilist">
					<legend>layui+list集合数据格式（dataStyle + dataFormat）</legend>
					<div class="layui-field-box">
						<p>考虑到一部分用户在使用组件之前，已经使用了其他树组件，而其他组件提供的数据格式并没有这么复杂，因此，组件开放适用于list集合形式的数据格式模式。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg4"><div style="height: 400px;overflow: auto;"><ul id="dataTree3" class="dtree" data-id="null"></ul></div></div>
							<div class="layui-col-lg8">
								<pre class="layui-code" lay-title="html" lay-encode="true">
									<div style="height: 400px;overflow: auto;">
									  <ul id="dataTree3" class="dtree" data-id="0"></ul>
									</div>
								</pre>
								<pre class="layui-code" lay-title="JavaScript" lay-encode="true">
									dtree.render({
									  elem: "#dataTree3",
									  url: "../json/case/dataTree2.json",
									  dataStyle: "layuiStyle",  //使用layui风格的数据格式
									  dataFormat: "list",  //配置data的风格为list
									  response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
									  checkbar:true //开启复选框
									});
								</pre>
							</div>
							<div class="layui-col-lg12">
								<p>此json的数据格式为：</p>
								<pre class="layui-code" lay-title="数据格式" lay-encode="true">
									{
									"code":0,
									"msg":"操作成功",
									"data": [
									  {"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},
									  {"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},
									  {"id":"003","title": "广东省","checkArr": "0","parentId": "0"},
									  {"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},
									  {"id":"005","title": "福建省","checkArr": "0","parentId": "0"},
									  {"id":"001001","title": "长沙市","checkArr": "0","parentId": "001"},
									  {"id":"001002","title": "株洲市","checkArr": "0","parentId": "001"},
									  {"id":"001003","title": "湘潭市","checkArr": "0","parentId": "001"},
									  {"id":"001004","title": "衡阳市","checkArr": "0","parentId": "001"},
									  {"id":"001005","title": "郴州市","checkArr": "0","iconClass": "dtree-icon-caidan_xunzhang","parentId": "001"}
									]
									}
								</pre>
								<p>layui风格+list集合数据格式中，code和msg是独立的，code的默认值是0。data中的数据是无子集关系的，只需提供一个具有上下级关系映射的list形式的数据即可。</p>
								<p>list集合数据格式中，顶级节点的parentId是ul标签上的data-id中的值。</p>
								<p>例如该数据中顶级标签是湖南省，它的parentId为0，则ul标签的data-id="0"。</p>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid" >
				<fieldset class="layui-elem-field layui-field-title" id="formatter">
					<legend>数据过滤（formatter）<span style="color:#FF5722;font-size: 12px;font-style: italic;">（v2.5.0新增）</span></legend>
					<div class="layui-field-box">
						<p>在数据显示层面上，添加自定义想显示的内容。只是作为展示层用，在获取数据时并不会获取到。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg4"><div style="height: 500px;overflow: auto;"><ul id="dataTree4" class="dtree" data-id="0"></ul></div></div>
							<div class="layui-col-lg8">
								<pre class="layui-code" lay-title="JavaScript">
									dtree.render({
									  elem: "#dataTree4",
									  initLevel: 1,
									  url: "../json/case/dataTree1.json",
									  formatter: {
									    title: function(data) {  // 示例给有子集的节点返回节点统计
									      var s = data.title;
									      if (data.children){
									        s += ' &lt;span style=\'color:blue\'&gt;(' + data.children.length + ')&lt;/span&gt;';
									      }
									      return s;
									    }
									  },
									  toolbar: true, //更多工具栏用法详见工具栏
									  toolbarWay:"fixed"
									});
									
									dtree.on("node('dataTree4')", function(obj){
									  layer.msg(JSON.stringify(obj.param));
									});
								</pre>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">为了适应各种各样的数据应用场景，dtree正在不断的努力，希望大家使用方便，使用愉快!。</blockquote>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="complex.js"></script>
<script type="text/javascript" src="../depend/version.js"></script>
<script type="text/javascript">
	layui.extend({
		dtree: '{/}../layui_ext/dtree/dtree'
	}).use(['element','layer', 'table', 'code' ,'util', 'dtree'], function(){
		var element = layui.element,
			layer = layui.layer,
			table = layui.table,
			util = layui.util,
			dtree = layui.dtree,
			$ = layui.$;
		
		layui.code();	// 代码修饰器
		util.fixbar();	// 置顶按钮
		
		if(document.location.protocol != "http:" && document.location.protocol != "https:") {
		    layer.msg("如需要使用异步加载，则需要将项目发布到服务器",{icon:7});
		}
		
		// 右侧弹出层
		layer.open({
			type: 1,
			title: "目录",
			content: '<ul id="menuTree" class="dtree" data-id="menuTree" style="width:159px;"></ul>',
			area:["180px", "500px"],
			offset:["50px","85%"],
			resize: false,
			shade: 0,
			success: function(layero, index){
				var DTree = dtree.render({
					elem: "#menuTree",
					data: menuTree,
					type: "all",
					icon: "-1",
					initLevel: "3",
					formatter: {
						title: function(data){
							var tt = data.title;
							var tts = ["数据过滤"];
							for(var i=0; i<tts.length; i++) {
								if(tt == tts[i]) {
									tt += "&nbsp;<span class='layui-badge-dot'></span>";
								}
							}
							return tt;
						}
					}
				});
				
				dtree.on("node('menuTree')", function(obj){
					var nodeId = obj.param.nodeId;
					$("html, body").animate({ scrollTop: $("#"+nodeId).offset().top-50 }, {duration: 500,easing: "swing"});
				});
			}
		});
		
		dtree.render({
			elem: "#dataTree",
			url: "../json/case/dataTree1.json",
            method: "get",
			dataStyle: "layuiStyle",
			response:{message:"msg",statusCode:0}
		});
		
		dtree.render({
			elem: "#dataTree1",
			url: "../json/case/dataTree1.json",
            method: "get",
			dataStyle: "layuiStyle",
			response:{message:"msg",statusCode:0}
		});
		
		dtree.render({
			elem: "#dataTree2",
			url: "../json/case/dataTree3.json",
            method: "get",
			dataFormat: "list",
			initLevel:"1",
			checkbar:true
		});
		
		dtree.render({
			elem: "#dataTree3",
			url: "../json/case/dataTree2.json",
            method: "get",
			dataFormat: "list",
			dataStyle: "layuiStyle",
			initLevel:"1",
			response:{message:"msg",statusCode:0},
			checkbar:true
		});
		
		dtree.render({
            elem: "#dataTree4",
            initLevel: 1,
            url: "../json/case/asyncTree1.json",
            method: "get",
            formatter: {
                title: function(data) {  // 示例标准数据格式下给有子集的节点返回节点统计
                    var s = data.title;
                    if (data.children){
                        s += ' <span style=\'color:blue\'>(' + data.children.length + ')</span>';
                    }
                    return s;
                }
            },
            toolbar: true,
            toolbarWay:"fixed"
		});
		
		dtree.on("node('dataTree4')", function(obj){
			layer.msg(JSON.stringify(obj.param));
		});
		
	});
</script>
</html>